<html>
<head>
<title>ChromeMilk Options</title>

<style>
#content { width: 500px; border: #135CBE solid 10px; border-radius: 10px; background: white; margin-left:auto; margin-right:auto; padding: 10px;}
body { font-family:sans-serif; background: #EDEDED;}
#logo {float:right; background-image:url(icon128.png); width:128px; height:128px;}
#load {display:block; text-align: center;}
</style>

<script src='md5.js'></script>
<script src='jquery.js'></script>
<script src='rtm.js'></script>

<script>
// default options
var def_popup = 'igoogle';
var def_badge = false;
var def_style = 'today';

var def_customFilter = '';

// current options
var popup;
var badge;
var style;
var customFilter;

/**
 * Erases all options stored in local storage
 */
function eraseOptions() {
	eraseData();
	
	localStorage.removeItem('popup');
	localStorage.removeItem('badge');
	localStorage.removeItem('style');
	localStorage.removeItem('customFilter');
}

/**
 * Loads options stored in local storage, or loads default ones if
 * stored options do not exist or are not valid
 */
function loadOptions() {
	popup = localStorage['popup'];
	if (popup == 'undefined' || (popup != 'gmail' && popup != 'igoogle' && popup != 'iphone' && popup != 'page' && popup != 'mobile')) popup = def_popup;
	
	if (popup == 'igoogle') $('#igoogle')[0].checked = true;
	else if (popup == 'gmail') $('#gmail')[0].checked = true;
	else if (popup == 'mobile') $('#mobile')[0].checked = true;
	else if (popup == 'iphone') $('#iphone')[0].checked = true;
	else if (popup == 'page') $('#page')[0].checked = true;
	
	badge = localStorage['badge'] == 'true' ? true : false;
	$('#badge')[0].checked = badge;
	
	style = localStorage['style'];
	if (style == 'undefined' || (style != 'today' && style != 'all' && style != 'custom')) style = def_style;
	if (style == 'today') $('#today')[0].checked = true;
	else if (style == 'all') $('#all')[0].checked = true;
	else if (style == 'custom') $('#custom')[0].checked = true;

	customFilter = localStorage['customFilter'];
	if (customFilter == 'undefined') customFilter = def_customFilter;
	$('#customfilter').val(customFilter);
}

/**
 * Saves current options to local storage
 */
function saveOptions() {
	localStorage['popup'] = popup;
	localStorage['badge'] = String(badge);
	localStorage['style'] = style;
	localStorage['customFilter'] = customFilter;
	
	var bg = chrome.extension.getBackgroundPage();
	bg.stopRequest();
	bg.startRequest();
}

$(document).ready(function() {
	loadOptions();
	
	if ($('#badge')[0].checked) $('#badge-options').show();
	else $('#badge-options').hide();
	
	$('#comp').hide();
	$('#auth').show();
	$('#noauth').hide();
	$('#load').hide();
	
	$('#load').ajaxStart(function() {
		$(this).show();
	}).ajaxStop(function() {
		$(this).hide();
	});
	
	$('#auth').live('click', function() {
		eraseData();
		
		rtmShowAuth(
			function(url) {
				chrome.tabs.create({url: url});
				$('#message').text('Click the Authentication Complete button after confirming authentication to complete the process.');
				$('#comp').show();
				$('#auth').hide();
				$('#noauth').hide();
			},
			function(rsp) {
				$('#message').text('Error: ' + rsp.err.code + ' - ' + rsp.err.msg + '\nTry again.\n' + 'Click the Authenticate button. You will be taken to RTM to confirm authentication.');
				$('#comp').hide();
				$('#auth').show();
				$('#noauth').hide();
			}
		);
		$('#comp').show();
		$('#auth').hide();
		$('#noauth').hide();
	});
	
	$('#comp').live('click', function() {
		
		rtmGetToken(
			function() {
				$('#message').text("Authenticated as " + user_username);
				$('#comp').hide();
				$('#auth').hide();
				$('#noauth').show();
			},
			function(rsp) {
				$('#message').text('Error: ' + rsp.err.code + ' - ' + rsp.err.msg + '\nTry again.\n' + 'Click the Authenticate button. You will be taken to RTM to confirm authentication.');
				$('#comp').hide();
				$('#auth').show();
				$('#noauth').hide();
			}
		);
	});
	
	$('#noauth').live('click', function() {
		eraseData();
		$('#message').text('Click the Authenticate button. You will be taken to RTM to confirm authentication.');
		$('#comp').hide();
		$('#auth').show();
		$('#noauth').hide();
	});
	
	if (localStorage['token'] != 'undefined' 
	    && typeof(localStorage['token']) != 'undefined'
	    && localStorage['user_username'] != 'undefined' 
	    && typeof(localStorage['user_username']) != 'undefined') {
	    
		$('#message').text("Authenticated as " + localStorage['user_username']);
		$('#comp').hide();
		$('#auth').hide();
		$('#noauth').show();
	}
	
	
	$('#badge').live('change', function() {
		if ($(this)[0].checked) $('#badge-options').show('slow');
		else $('#badge-options').hide('slow');
		badge = $(this)[0].checked;
		saveOptions();
	});
	
	$('[name=popup]').live('change', function() {
		if ($(this)[0].checked) popup = $(this).val();
		saveOptions();
	});
	
	$('[name=style]').live('change', function() {
		if ($(this)[0].checked) style = $(this).val();
		saveOptions();
	});
	
	$('#customfilter').live('change', function() {
		customFilter = $(this).val();
		saveOptions();
	});
	
	$('#erase').live('click', function() { eraseOptions(); location.reload();});
});

</script>
</head>

<body>

<div id='content'>
	<span id='logo'></span>
	<h1>ChromeMilk options</h1>
	
	<p>Options are saved automatically.</p>
	
	<h3>Popup type</h3>
	<p>
		<input type='radio' name='popup' value='igoogle' id='igoogle' /><label for='igoogle'>iGoogle <a href='http://www.rememberthemilk.com/services/igoogle/' target='_blank'>(more info)</a></label><br />
		<input type='radio' name='popup' value='gmail' id='gmail' /><label for='gmail'>Gmail <a href='http://www.rememberthemilk.com/services/gmail/gadget/' target='_blank'>(more info)</a></label><br />
		<input type='radio' name='popup' value='mobile' id='mobile' /><label for='mobile'>Mobile <a href='https://www.rememberthemilk.com/services/mobile/' target='_blank'>(more info)</a></label><br />
		<input type='radio' name='popup' value='iphone' id='iphone' /><label for='iphone'>iPhone (requires pro account) <a href='http://www.rememberthemilk.com/services/iphone/web/' target='_blank'>(more info)</a></label><br />
		<input type='radio' name='popup' value='page' id='page' /><label for='page'>No popup, load Remember the Milk web page</label>
	</p>
	
	<h3>Icon badge</h3>
	<p>
		<input type='checkbox' name='badge' id='badge' /><label for='badge'>Show icon badge (requires authentication)</label>
	</p>
	<div id='badge-options'>
		<p>Badge is updated once every five minutes and when the icon is clicked.</p>
		<h4>Authentication</h4>
		<p id='message'>Click the Authenticate button. You will be taken to RTM to confirm authentication.</p>
		
		<button id='auth'>Authenticate</button>
		<button id='comp'>Authentication Complete</button>
		<button id='noauth'>Remove Authentication</button><br />
		<div id='load'><img alt='Loading...' title='Loading...' src='load.gif' /></div>
		
		
		<h4>Badge count</h4>
		<p>
			<input type='radio' name='style' value='today'  id='today' /><label for='today'>Due today</label><br />
			<input type='radio' name='style' value='all'    id='all'   /><label for='all'>All incomplete</label><br />
			<input type='radio' name='style' value='custom' id='custom'/><label for='custom'>Custom <a href='http://www.rememberthemilk.com/help/answers/search/advanced.rtm' target='_blank'>(help)</a></label>
			<input type='text' name='customfilter' id='customfilter' value=''/>
		</p>
	</div>
	
	<h3>Erase Options</h3>
	<p>
		<button id='erase'>Erase all options</button><br />
	</p>
	
	
	<hr />
	
	<div id='credits'>
	<h3>Credits and License</h3>
	<p>
		<strong>Author</strong><br /> 
		Juliana Pe&ntilde;a <br />
		<a href='http://julianapena.com'>http://julianapena.com</a><br />
		<a href='http://twitter.com/limitedmage'>@limitedmage</a><br />
		If you like this extension, please <a href="http://julianapena.com/donate.html?ref=ChromeMilk">buy me a cup of coffee</a>.
	</p>
	<p>
		<strong>Icon</strong><br />
		Camila Gonz&aacute;lez<br />
		<a href='http://aconitehikaru.deviantart.com/'>DeviantArt profile</a><br />
		<a href='http://twitter.com/GhostGlider'>@GhostGlider</a><br />
		Icon under a <a href='http://creativecommons.org/licenses/by-sa/3.0/'>Creative Commons Attribution-Share Alike 3.0 License</a>.
	</p>
	<p>
		<strong>Code</strong><br />
		This extension is open source under the <a href='http://creativecommons.org/licenses/GPL/2.0/'>GPLv2</a>. More info at <a href='http://code.google.com/p/chromemilk/'>ChromeMilk's Google Code page</a>.
	</p>
	</div>
</div>

</body>
</html>